<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Harry Potter's Story</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_804942_csyh3q1b3tf.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_806639_uyb8jrjmab.css">
    <style>
       html,body{
            height: 100%;
       }
       header{
            position: relative;
            height: 100%;
            min-height: 600px;
            background: #000 url(imags/bg.jpg) center center no-repeat;
            background-size: cover;
       }
       header .logo{
           color: #f7ba3e;
           font-size: 32px;
           float: left;
           margin-top: 10px;
       }
       header .nav{
         float: right;
       }

       header .nav > li {
        float: left;
        margin: 10px;
       }
       header .nav a{
          display: inline-block;
          padding: 6px;
          border-radius: 3px;
          color: #fff;
          font-size: 16px;
       }
       header .nav a:hover{
           background: #f7ba3e;
       }
       header .intro{
           position:absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
           color: #fff;
           text-align: center;
       }
       header .intro h1{
            font-size: 46px;
            font-weight: bold;
       }
       header .intro h2{
           font-size:30px;
           margin-top: 10px;
       }
       header .intro .button{
           margin-top: 15px;
       }


       section{
         margin-top: 80px;
         text-align: center;
       }
       section > h2{
         font-size: 60px;
       }
       section > p {
          margin-top: 10px;
       }
       section > ul .iconfont{
         font-size:40px;
       }
       section .story > li{
          float: left;
          width: 33.33%;
          padding: 10px 20px;
       }
       section > ul p{
          margin-top: 10px;
       }

       section .person figure{
          width: calc(33.33% - 20px);
          height: 300px;/*可加可不加，但是一旦文字过多，造成被覆盖卡住现象*/
          margin: 10px;
          float: left;
       }
       section .person a{
         display: inline-block;
         height: 220px;
       }
        section .person a:hover{
            opacity: 0.8;
        }
       section .person img {
         width: 100%;
         height: 100%;
         
       }
       section .person figcaption {
         font-size: 18px;
         font-weight: bold;
         margin-top: 10px;
       }
       section .person p{
          color: #666;
          margin-top: 10px;
       }
       
       section .timeline > li::after{
           content: '';
           display: block;
           clear: both;
       }
       section .timeline img,
       section .timeline .img{       
            vertical-align: middle;/*垂直居中*/
            /*float: left;*/
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid lightblue;
            
       }
       section .timeline .img{
            padding-top: 25px;
            font-size: 15px;
            display: inline-block;       
            text-align: center;/*文本居中*/
       }
        section .timeline > li{
            position: relative;
           margin-top: 40px;
        }
        section .timeline > li:nth-child(odd){
           /*margin-top: 20px;*/
           padding-right: calc(50% - 50px);
           text-align: right;
       }
       section .timeline > li:nth-child(odd) dl{
            margin-right: 120px;
       }
        section .timeline > li:nth-child(odd) img{
            float: right;
        }
       section .timeline > li:nth-child(even){
            padding-left: calc(50% - 50px);
            text-align: left;
       }
       section .timeline > li:nth-child(even) dl{
            margin-left: 120px;
       }
       section .timeline > li:nth-child(even) img{
            float: left;
        }
        section .timeline dt {
            font-size: 16px;
            font-weight: bold;
        }
        section .timeline dd:nth-child(2){
            color: #666;
        }
        /*或者
        section .timeline dd:nth-of-type(1){
            color: red;
        }*/

        section .timeline > li::before {
            content: '';
            position: absolute;/*与position:relative;d对应起来*/
            left: 50%;
            top: 100px;
            margin-left: 0px;
            display: block;
            height: 43px;
            width: 4px;
            background-color: lightblue;
        }
        section .timeline > li:last-child::before {
            height: 0;
        }
        
        section .item > li{
            float: left;
            width: 33.33%;
            padding: 10px 20px;
        }
      
        section .item dt {
            font-size: 16px;
            font-weight: bold;
        }
        section .item img{       
            vertical-align: middle;/*垂直居中*/
           /* float: left;*/
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid #baf3ff;     
        }
        section .item{
            padding:10px 10px;
        }
        section .social{
            font-size:40px;
            padding: 15px 10px;
        }
        section .social{
            font-size:40px;
            padding: 15px 10px;
        }

    </style>
</head>
<body>
    <header>
        <div class="navbar layout clearfix">
            <a href="" class="logo">Harry Potter</a> 
            <ul class="nav">
                <li><a href="#">Story</a></li>
                <li><a href="#">Person</a></li>
                <li><a href="#">Character</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
         <div class="intro layout">
                 <h1>WELCOME TO MAGIC's WORLD</h1>
                 <h2>Life Is Love , Love Is Life</h2>
                 <a href="#" class="button">Read Me More</a>
            </div>      
    </header>

    <main class="layout">
        <!-- part1 -->
        <section>
            <h2>Storys</h2>
            <p>哈利波特全集让你一次看过瘾</p>
            <ul class="story clearfix">
               <li>
                  <span class="iconfont icon-story1"></span> 
                  <h3>哈利·波特与魔法石</h3>
                  <p>《哈利·波特与魔法石》中，一岁的哈利·波特失去了父母后，便来到了姨妈家，过着极其痛苦的日子。一直到十一岁生日那天，哈利一生的命运才发生了变化，他收到了一封神秘的信，被邀请去一个童话般的地方一一霍格沃茨魔法学校。但一块魔法石出现了，它将关系到世界的现在和未来。</p> 
               </li>
                <li>
                  <span class="iconfont icon-story2"></span> 
                  <h3>哈利·波特与密室</h3>
                  <p>《哈利·波特与密室》描写了邪恶巫师伏地魔以一种新的形式归来。书中发生的事件表明邪恶只能被暂时避免，而不会被永久地铲除；密室则显示了巫师世界跟麻瓜的世界有许多共同点。任何世界都没有完美安宁的最终结局。</p> 
               </li>
                <li>
                  <span class="iconfont icon-story3"></span> 
                  <h3>哈利·波特与阿兹卡班的囚徒</h3>
                  <p>《哈利·波特与阿兹卡班的囚徒》讲述了哈利·波特在学校已经度过了不平凡的两年，传言布莱克是“黑魔法”高手伏地魔——杀害哈利父母的凶手——的忠实信徒，曾经用一句魔咒接连结束了13条性命。哈利的生活因此发生了极大的变化。</p> 
               </li>
            </ul>
        </section>
        <!--part 2-->
        <section>
             <h2>People</h2>
             <p>每一个在哈利波特出现过的人物</p>
                <div class="person clearfix">  
                    <figure>
                       <a href="#"><img src="imags/people1.jpg"></a>
                       <figcaption>哈利·波特­</figcaption>
                       <p>本书主人公，大名鼎鼎的“大难不死的男孩”</p>
                    </figure>
                     <figure>
                       <a href="#"><img src="imags/people1.jpg"></a>
                       <figcaption>哈利·波特­</figcaption>
                       <p>本书主人公，大名鼎鼎的“大难不死的男孩”</p>
                    </figure>
                     <figure>
                       <a href="#"><img src="imags/people1.jpg"></a>
                       <figcaption>哈利·波特­</figcaption>
                       <p>本书主人公，大名鼎鼎的“大难不死的男孩”</p>
                    </figure>
                     <figure>
                       <a href="#"><img src="imags/people1.jpg"></a>
                       <figcaption>哈利·波特­</figcaption>
                       <p>本书主人公，大名鼎鼎的“大难不死的男孩”</p>
                    </figure>
                     <figure>
                       <a href="#"><img src="imags/people1.jpg"></a>
                       <figcaption>哈利·波特­</figcaption>
                       <p>本书主人公，大名鼎鼎的“大难不死的男孩”</p>
                    </figure>
                     <figure>
                       <a href="#"><img src="imags/people1.jpg"></a>
                       <figcaption>哈利·波特­</figcaption>
                       <p>本书主人公，大名鼎鼎的“大难不死的男孩”</p>
                    </figure>
                </div>
         </section>
<!-- part3 -->
        <section>
             <h2>Timeline</h2>
             <p>故事的发展曲线</p>
             <ul class="timeline">
                <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                </li>
                  <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                </li>
                  <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                </li>
                <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                </li>
                  <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                </li>
                  <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                  </li>
                  <li>
                    <img src="imags/story1.jpg">
                    <dl>
                        <dt>哈利·波特与魔法石</dt>
                        <dd>《哈利·波特》系列小说的第一部</dd>
                        <dd>讲述了自幼父母双亡的孤儿哈利·波特收到魔法学校霍格沃茨的邀请，前去学习魔法，之后遭遇的一系列历险。</dd>
                    </dl>
                 </li>
                 <li>
                    <span class="img">Harry Potter Happy End</span>
                 </li>
             </ul>
        </section>
<!-- part4 -->
        <section>
            <h2>Magic</h2>
            <p>哈利波特世界中出现的魔法道具</p>
            <ul class="item">
               <li>
                  <img src="imags/magic1.jpg">
                  <h3>魔杖</h3>
                  <p>罗琳的魔法世界里魔杖似乎也是有生命的</p>
                   <div class="social clearfix">  
                      <span class="iconfont icon-social1"></span>
                      <span class="iconfont icon-social2"></span>
                      <span class="iconfont icon-social3"></span>      
                   </div>   
               </li>
                <li>
                  <img src="imags/magic2.jpg">
                  <h3>分院帽</h3>
                  <p>虽然卖相不好却充满智慧</p>
                  <div class="social clearfix">  
                      <span class="iconfont icon-social1"></span>
                      <span class="iconfont icon-social2"></span>
                      <span class="iconfont icon-social3"></span>      
                   </div> 
               </li>
                <li>
                  <img src="imags/magic3.jpg">
                  <h3>光轮2000</h3>
                  <p>哈利第一支扫帚，可敬老教授麦格的赠物</p>
                  <div class="social clearfix">
                      <span class="iconfont icon-social1"></span>
                      <span class="iconfont icon-social2"></span>
                      <span class="iconfont icon-social3"></span>    
                  </div>       
               </li>
            </ul>
        </section>
    </main>
    <footer></footer>
</body>
</html>